<script type="text/javascript">
	var plat_index_latency = [];
	var previousPoint_latency = null;
     
    function json2TimeStamp(milliseconds){
　　        var datetime = new Date();
　　        datetime.setTime(milliseconds);
　　        var year=datetime.getFullYear();
               //月份重0开始，所以要加1，当小于10月时，为了显示2位的月份，所以补0
　　        var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
　　        var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
　　        var hour = datetime.getHours()< 10 ? "0" + datetime.getHours() : datetime.getHours();
　　        var minute = datetime.getMinutes()< 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
　　        var second = datetime.getSeconds()< 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
　　        return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second;
    }

$.fn.UseTooltipLatency = function () {
    $(this).bind("plothover", function (event, pos, item) {
        if (item) {
            if (previousPoint_latency != item.dataIndex) {
                previousPoint_latency = item.dataIndex;
                $("#tooltip").remove();
                var x = item.datapoint[0];
                var y = item.datapoint[1];               
                //console.log(x+","+y)
                x=json2TimeStamp(parseInt(x-28800000))
                showTooltip(item.pageX, item.pageY,
                  x + "<br/>" + item.series.label+":<strong>" + y + "</strong>",item.series.color);
            }
        }
        else { 
            $("#tooltip").remove();
            previousPoint_latency = null;
        }
    });
};

function showTooltip(x, y, contents,color) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y + 10,
        left: x - 120,
        border: '2px solid '+color,
        padding: '2px',    
        size: '10',  
        'border-radius': '6px 6px 6px 6px',
        'background-color': '#fff',
        opacity: 0.80,
        'z-index':999,
    }).appendTo("body").fadeIn(200);
}

function iops_get_data(id,index,obj,url,str){
    {% for cluster in clusters %}
        if ( {{cluster.id}}== id ){
          $.get(id+"/"+url,function(data){     
             $.plot(obj, [{label:str,data:data}], plat_index_latency[index]);
           })
        } 
    {%endfor%}
}
    function iops_get_color(index,colors,fillcolor){
        plat_index_latency[index].colors= colors;
        // plat_index_latency[index].series.lines.fillColor=fillcolor; 
        if($("#latency_flow_time").attr("realvalue")=="day"){
            plat_index_latency[index].xaxis.tickSize=[2, "hour"];
        } else if($("#latency_flow_time").attr("realvalue")=="week") {
            plat_index_latency[index].xaxis.tickSize=[15, "hour"];
        } else if($("#latency_flow_time").attr("realvalue")=="month"){
            plat_index_latency[index].xaxis.tickSize=[2.5, "day"];
        }             
    }

    function iops_get_value(id,obj,index,unit,url){
        $.get(id+"/"+url,function(data){
            obj.find("span").text(data[index]+unit);  
            obj.find("span").attr("title", data[index]+unit)
        })        
    }

$(function(){	
    $(".NetworkLatency_canvas").each(function(i){
        $(this).attr("mark",i);             
    })
	//plat

   $(".network_latency .network_latency_").click(function(){
      if($(this).find(".NetworkLatency_canvas").css("display")=="none"){
      	 $(this).find(".backcolorHover").removeClass("backcolorHover");
          $(this).find(".backcolor").addClass("backcolorHover");
          $(this).siblings().find(".backcolorHover").removeClass("backcolorHover"); 
         

          $(this).find(".NetworkLatency_canvas").show();  
          $(this).find(".NetworkLatencyr").show();  
          $(this).siblings().find(".NetworkLatency_canvas").hide(); 
          $(this).siblings().find(".NetworkLatencyr").hide(); 
               
          var temp=$(this);                    
          plat_index_latency[temp.find(".NetworkLatency_canvas").attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals);
                  };                    
          iops_get_color(temp.find(".NetworkLatency_canvas").attr("mark"),["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");          

          $.get(temp.find(".pro_div_network_latency").attr("id")+"/get_latency",function(data){       
              $.plot(temp.find(".NetworkLatency_canvas"), [{label:"Latency",data:data}],plat_index_latency[temp.find(".NetworkLatency_canvas").attr("mark")]); 
          })

          if( $(this).find(".pro_group_network_latency li").find("a").length<=0)
          $(this).find(".pro_group_network_latency li").wrapInner("<a></a>");	      

       }      

	});
   $(".network_latency .network_latency_").find(".pro_group_network_latency li").delegate("a","click",function(){
       $(this).parent().addClass("backcolorHover");
	    $(this).parent().parent().siblings("ul").find(".backcolorHover").removeClass("backcolorHover")
	    $(this).parent().siblings().removeClass("backcolorHover"); 
   })
	$(".network_latency .network_latency_").find(".pro_group_network_latency li.iops_all").delegate("a","click",function(){	    
       var temp=$(this).parent().parent().siblings("div.NetworkLatency_canvas");	       
       plat_index_latency[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals)+" M";
                  };
       iops_get_color(temp.attr("mark"),["#662D91", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#662D91");
      
       var temp_id=$(this).parent().parent().parent().attr("id");
       //if(==""
       iops_get_data(temp_id,temp.attr("mark"),temp,"get_swallow_spit_"+$("#latency_flow_time").attr("realvalue"),"吞吐"); 
       iops_get_value(temp_id,$(this).parent(),3,"MB/s","get_iops_val_"+$("#latency_flow_time").attr("realvalue"));       
      // iops_get_value(temp_id,$(this).parent(),3,"MB/s");   
	})

  $("#latency_write_button").click(function(){
        var temp = $(".network_latency .network_latency_ .NetworkLatency_canvas")
        iops_get_color(temp.attr("mark"),["#662D91", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#662D91");
        $.get(temp.parent().attr("id")+"/get_write_latency",function(data){    
            $.plot(temp, [{label:"WriteLatency",data:data}], plat_index_latency[temp.attr("mark")]);
        })
        temp.UseTooltipLatency();
  })

  $("#latency_read_button").click(function(){
        var temp = $(".network_latency .network_latency_ .NetworkLatency_canvas")
        iops_get_color(temp.attr("mark"),["#b2d1ff", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#d8def0");
        $.get(temp.parent().attr("id")+"/get_read_latency",function(data){    
            $.plot(temp, [{label:"ReadLatency",data:data}], plat_index_latency[temp.attr("mark")]);
        })
        temp.UseTooltipLatency();
  })

    $(".NetworkLatency_canvas").hide();
    $(".NetworkLatencyr").hide();
    $("#NetworkLatency").show();

    $(".NetworkLatency_canvas").hide();
    $(".NetworkLatencyr").hide();
    $("#NetworkLatency").show();
    $("#NetworkLatencyr").show();
    $("#NetworkLatency").siblings("ul").find(".backcolor").addClass("backcolorHover");
    if( $("#NetworkLatency").parent().find(".pro_group_network_latency li").find("a").length<=0)
          $("#NetworkLatency").parent().find(".pro_group_network_latency li").wrapInner("<a></a>");	

   $(".network_latency .network_latency_ .NetworkLatency_canvas").each(function(){  
       plat_index_latency[$(this).attr("mark")]= {	         
	         colors: ["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],
	         legend: {
               show:false,
               position: 'ne',
                labelBoxBorderColor: "#000000",
                container: $(this).siblings("#NetworkLatencyr"),
                noColumns: 2	         
	         },
            series:{
                lines: {                         
                    fill: true,
                    lineWidth:1,
                    //fillColor: "#1D6E9B",
                }
            },
            xaxis: {
                //show: true,min:0,max:24,ticks:6,tickDecimals:0,
               // transform: function (v) { return -v; }, 
               //  tickLength:3,
                 mode:"time",
               timeformat: "%0m/%0d %0H:%0M ",  
              tickSize:[4, "hour"],
            },
            yaxis: {
              // show: true,min:0,ticks:3,
             //  tickLength:2,
               min:0,
               tickFormatter:function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals) + "μs";
                  },
            },
            grid:{
                backgroundColor:"#fff",
                borderWidth:1,
                borderColor:"#D6D6D6",
                tickColor: "#dedede",
                hoverable:true,
            }
    };  

    //default show convas
    var temp=$(this);
    iops_get_color(temp.attr("mark"),["#b2d1ff", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#d8def0");
    $.get(temp.parent().attr("id")+"/get_read_latency",function(data){    
        $.plot(temp, [{label:"ReadLatency",data:data}], plat_index_latency[temp.attr("mark")]);
    })
    temp.UseTooltipLatency();
})          
    var iops_refresh = window.setInterval(function(){
        if ($("#interval_tip").hasClass("/summary")){
            $(".network_latency .netwrok_latency_ .NetworkLatency_canvas").each(function(i){
                var temp=$(this);
                plat_index_latency[i].yaxis.tickFormatter=function formatter(val, axis) {
                    return val.toFixed(axis.tickDecimals);
                };      

                iops_get_color(i,["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");
                $(this).parent().find("li.backcolorHover").find("a").click();
            })
            iops_get_all_value();
        }
        else
        {
           clearInterval(iops_refresh)
        }
    }, 300000)
    
    var latency_flow_time = [["day","日流量图"],['week',"周流量图"],['month',"月流量图"]];
    $('#latency_flow_time').rqDropDown({
        "datatype":"local",
        "source":latency_flow_time   ,
        "onchange":"flow_time_change_latency"  		
    });  
})
    function iops_get_all_value(){
        $(".cluster_io_pro .cluster_io_pro_div").each(function(){   
            var temp=$(this);      
            var url = temp.attr("id")+"/get_iops_val_"+$("#cluster_io_flow_time").attr("realvalue");
            $.get(url, function(data){ 
            	temp.find("li.read_latency span").text(data[6] + 'ms');
           	    temp.find("li.write_latency span").text(data[7] + 'ms');
                temp.find("li.IOPS_all span").text(data[0]);
                temp.find("li.IOPS_read span").text(data[1]);
                temp.find("li.IOPS_write span").text(data[2]);
                temp.find("li.io_all span").text(data[3]+"MB/s");
                temp.find("li.io_swallow span").text(data[4]+"MB/s");
            	temp.find("li.io_spit span").text(data[5]+"MB/s");
                temp.find("li.IOPS_all span").attr("title",data[0]);
                temp.find("li.IOPS_read span").attr("title",data[1]);
                temp.find("li.IOPS_write span").attr("title",data[2]);
                temp.find("li.io_all span").attr("title",data[3]+"MB/s");
                temp.find("li.io_swallow span").attr("title",data[4]+"MB/s");
            	temp.find("li.io_spit span").attr("title",data[5]+"MB/s");

           })
       })
    }
        $("#latency_day_button").click(function(){
           $(".network_latency .network_latency_ .NetworkLatency_canvas").each(function(i){
             var s_temp=$(this).parent().find(".backcolorHover");
             s_temp.removeClass("backcolorHover");
             s_temp.parent().parent().find(".backcolor").addClass("backcolorHover");
         
             var temp=$(this);
            $("#latency_flow_time").attr("realvalue","day")
            plat_index_latency[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals);
                  };       
            iops_get_color(temp.attr("mark"),["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");     
            $.get(temp.parent().attr("id")+"/get_iops_day",function(data){    
                $.plot(temp, [{label:"IOPS",data:data}], plat_index_latency[temp.attr("mark")]);
            })
            iops_get_all_value();
           })  
       });
     $("#latency_week_button").click(function(){
         $(".network_latency .network_latency_ .NetworkLatency_canvas").each(function(i){
             var s_temp=$(this).parent().find(".backcolorHover");
             s_temp.removeClass("backcolorHover");
             s_temp.parent().parent().find(".backcolor").addClass("backcolorHover");

             var temp=$(this);
            $("#latency_flow_time").attr("realvalue","week")
            plat_index_latency[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals);
                  };      

             iops_get_color(temp.attr("mark"),["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");
            $.get(temp.parent().attr("id")+"/get_iops_week",function(data){    
                $.plot(temp, [{label:"IOPS",data:data}], plat_index_latency[temp.attr("mark")]);
              })
            iops_get_all_value();
           })
     });
     $("#latency_month_button").click(function(){
         $(".network_latency .network_latency_ .NetworkLatency_canvas").each(function(i){
             var s_temp=$(this).parent().find(".backcolorHover");
             s_temp.removeClass("backcolorHover");
             s_temp.parent().parent().find(".backcolor").addClass("backcolorHover");
           
             var temp=$(this);
            $("#latency_flow_time").attr("realvalue","month")
            plat_index_latency[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals);
                  };
       
             iops_get_color(temp.attr("mark"),["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");                                     
            
            $.get(temp.parent().attr("id")+"/get_iops_month",function(data){    
                $.plot(temp, [{label:"IOPS",data:data}], plat_index_latency[temp.attr("mark")]);
              })
            iops_get_all_value();
           })  
     });
     function flow_time_change_latency(name,status){
         if(status=="day"){          
          $(".network_latency .network_latency_ .NetworkLatency_canvas").each(function(i){
             var s_temp=$(this).parent().find(".backcolorHover");
             s_temp.removeClass("backcolorHover");
             s_temp.parent().parent().find(".backcolor").addClass("backcolorHover");
         
             var temp=$(this);
            $("#latency_flow_time").attr("realvalue","day")
            plat_index_latency[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals);
                  };       
            iops_get_color(temp.attr("mark"),["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");     
            $.get(temp.parent().attr("id")+"/get_iops_day",function(data){    
                $.plot(temp, [{label:"IOPS",data:data}], plat_index_latency[temp.attr("mark")]);
            })
            iops_get_all_value();
           })  
         }else
         if(status=="week"){ 
          $(".network_latency .network_latency_ .NetworkLatency_canvas").each(function(i){
             var s_temp=$(this).parent().find(".backcolorHover");
             s_temp.removeClass("backcolorHover");
             s_temp.parent().parent().find(".backcolor").addClass("backcolorHover");

             var temp=$(this);
            $("#latency_flow_time").attr("realvalue","week")
            plat_index_latency[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals);
                  };      

             iops_get_color(temp.attr("mark"),["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");
            $.get(temp.parent().attr("id")+"/get_iops_week",function(data){    
                $.plot(temp, [{label:"IOPS",data:data}], plat_index_latency[temp.attr("mark")]);
              })
            iops_get_all_value();
           })  
         }else
         if(status=="month"){
           $(".network_latency .network_latency_ .NetworkLatency_canvas").each(function(i){
             var s_temp=$(this).parent().find(".backcolorHover");
             s_temp.removeClass("backcolorHover");
             s_temp.parent().parent().find(".backcolor").addClass("backcolorHover");
           
             var temp=$(this);
            $("#latency_flow_time").attr("realvalue","month")
            plat_index_latency[temp.attr("mark")].yaxis.tickFormatter=function formatter(val, axis) {
                          return val.toFixed(axis.tickDecimals);
                  };
       
             iops_get_color(temp.attr("mark"),["#1D6E9B", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],"#1D6E9B");                                     
            
            $.get(temp.parent().attr("id")+"/get_iops_month",function(data){    
                $.plot(temp, [{label:"IOPS",data:data}], plat_index_latency[temp.attr("mark")]);
              })
            iops_get_all_value();
           })  
         }
     }
   /*$(function(){
     var width_ = $(window).width(); 
     if(width_>1090){
         $(".pro_plat").css({width:(width_)*0.42}); 
     }
     if(width_<1090){
         $(".pro_plat").css({width:(width_)*0.38}); 
     }
    });*/
    $("#iopsButton").click(function(){
         var mode = $("#latency_flow_time").attr("realvalue");
         window.location.href='/summary/iops_export?mode=' + mode;
    });
     $(".latency_button li").on('click', function() { 
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
    });
</script>  
<div class="panel-heading">
    <a href="#">延迟</a>

    <a href="" class="panel-right-i"><i class="fa fa-gear"></i></a>
    <div style="float:right;">
        <ul class="latency_button">
                <li class="active" id="latency_read_button">读延迟</li>
                <li id="latency_write_button">写延迟</li>
            </ul>           
    </div>

            <!--<ul class="latency_button">
                <li class="active" id="latency_day_button">日</li>
                <li id="latency_week_button">周</li>
                <li id="latency_month_button">月</li>
            </ul>-->
</div>
<div class="panel-body n_panel-body" style="height:150px;">
            <div class="pro_wrap ppool_pro network_latency">
                {% for cluster in clusters %}
                    <div class="pro_block network_latency_" style="width:100%">
                        
                        <div class="pro_div pro_div_network_latency"  id={{cluster.id}} style="width:100%">
                            <!--<ul class="pro_group pro_group_1 pro_group_network_latency">
                                <li class="IOPS_all backcolor">IOPS:<span title={{cluster.iops}}>{{cluster.iops}}</span></li> 
                                <li class="IOPS_read">r:<span title={{cluster.iops_read}}>{{cluster.iops_read}}</span></li> 
                                <li class="IOPS_write">w:<span title={{cluster.iops_write}}>{{cluster.iops_write}}</span></li>  
                            </ul>
                            <input type="button" style="height:22px;line-height:12px;margin-top:5px;" value="[['button export'|translate]]" class="button button_gray" id="iopsButton"/>
                            <ul class="pro_group pro_group_network_latency" style="display:none">      
                                <li class="tt_all iops_all">吞吐:<span title={{cluster.swallow_spit}}MB/s>{{cluster.swallow_spit}}MB/s</span></li>                
                                <li class="tt_swallow iops_swallow">in:<span title={{cluster.iops_swallow}}MB/s>{{cluster.iops_swallow}}MB/s</span></li>                 
                                <li class="tt_spit iops_spit">out:<span title={{cluster.iops_spit}}MB/s>{{cluster.iops_spit}}MB/s</span></li>  
                            </ul> -->
                           <div class="pro_plat NetworkLatency_canvas" id="NetworkLatency" style="height:218px;position:relative;width:100%;float:left;top:20px;"></div>   
                           <div id="NetworkLatencyr" class="NetworkLatencyr" style="position:absolute;right:30px;"></div>          
                       </div>
                     </div>
                {%endfor%}
            </div>

<div  id="ppool_latency_dialog"></div>
<div class="anchaor_a">
</div>
</div>
